<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表+表单+新元素</title>
	</head>
	<body>
		<h1>列表元素：集合-一组相同数据</h1>
		<!-- 第一种使用方式：无序列表  使用率高：网站优化，有利于SEO优化-->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!-- 第二种使用方式：有序列表 -->
		<ol>
			<li>大头儿子</li>
			<li>邋遢大王</li>
			<li>喜洋洋</li>
		</ol>
		<!-- 第三种使用方式：定义列表 解释小图片-->
		<dl>
			<dt><img src="img/1.png"></dt>
			<dd>这是熊二</dd>
		</dl>
		<h1>表单元素</h1>
		<!-- 采集用户信息：账户登录、颜色、功能型操作 -->
		<form>
		账号：<input type="text">
		密码：<input type="password">
		<button>按钮</button>
		<input type="submit">
		<input type="reset">
		男 <input type="radio" name="sex">
		女 <input type="radio" name="sex">
		肉 <input type="checkbox">
		菜 <input type="checkbox">
		汤 <input type="checkbox">
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		lorem<mark>lorems</mark>
		<!-- 度量元素 -->
		<meter value="60" max="100" min="1"></meter>
		<!-- 细节元素 -->
		<details>
			<summary>默认显示效果</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, aliquam. Nisi, quisquam itaque totam quia iste maiores fugit hic, sequi explicabo quibusdam rerum nihil aperiam? Dolore nisi cumque corporis vel.lorem Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam ad, dolores voluptatum quod alias quo quos qui consectetur culpa? Est quis doloremque accusamus praesentium, excepturi molestiae aspernatur commodi quod voluptate? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et aliquam neque atque voluptatem accusantium eveniet quod libero ea repellat dolorum quia, tempore sit obcaecati eius recusandae repellendus deleniti, voluptas magni! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nesciunt dolorum nobis numquam architecto perspiciatis nulla quos, praesentium suscipit alias libero? Illum repellat maxime repellendus quia id dolore dolores autem unde!</div>
		</details>
	</body>
</html>